{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}仪表盘{% endblock %}

{% block css %}

  <!-- Theme style -->
  <link rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="{% static 'dist/css/skins/_all-skins.min.css' %}">

{% endblock %}


{% block content %}
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <h1>
      仪表盘
      <small>dashboard</small>
    </h1>
    <ol class="breadcrumb">
      <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
      <li class="active">仪表盘</li>
    </ol>
  </section>

  <!-- Main content -->
  <section class="content">
    <div class="row">
      <!-- row -->
      <div class="col-md-12">
        <!-- jQuery Knob -->
        <div class="box box-solid">
          <div class="box-header">
            <i class="fa fa-bar-chart-o"></i>

            <h3 class="box-title">设备状态
              <small>(%)</small>
            </h3>

            <div class="box-tools pull-right">
              <button type="button" class="btn btn-default btn-sm" data-widget="collapse"><i class="fa fa-minus"></i>
              </button>
              <button type="button" class="btn btn-default btn-sm" data-widget="remove"><i class="fa fa-times"></i>
              </button>
            </div>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <div class="row">
              <div class="col-xs-6 col-md-2 col-md-offset-1 text-center">
                <input type="text" class="knob" value="{{ up_rate }}" data-width="90" data-height="90"
                       data-fgColor="#00a65a" data-readonly="true">

                <div class="knob-label">在线</div>
              </div>
              <!-- ./col -->
              <div class="col-xs-6 col-md-2 text-center">
                <input type="text" class="knob" value="{{ o_rate }}" data-width="90" data-height="90"
                       data-fgColor="#f56954" data-readonly="true">

                <div class="knob-label">下线</div>
              </div>
              <!-- ./col -->


              <div class="col-xs-6 col-md-2 text-center">
                <input type="text" class="knob" value="{{ bd_rate }}" data-width="90" data-height="90"
                       data-fgColor="#932ab6" data-readonly="true">

                <div class="knob-label">故障</div>
              </div>
              <!-- ./col -->
              <div class="col-xs-6 col-md-2 text-center">
                <input type="text" class="knob" value="{{ bu_rate }}" data-width="90" data-height="90"
                       data-fgColor="#3c8dbc" data-readonly="true">

                <div class="knob-label">备用</div>
              </div>
              <!-- ./col -->
              <div class="col-xs-6 col-md-2 text-center">
                <input type="text" class="knob" value="{{ un_rate }}" data-width="90" data-height="90"
                       data-fgColor="#cccccc" data-readonly="true">

                <div class="knob-label">未知</div>
              </div>
              <!-- ./col -->
            </div>
            <!-- /.row -->
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- /.col -->


      <div class="col-md-6">
        <!-- BAR CHART -->
        <div class="box box-success">

          <div class="box-header with-border">
            <h3 class="box-title">各状态资产数量统计：</h3>

            <div class="box-tools pull-right">
              <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
              </button>
              <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
            </div>
          </div>
          <div class="box-body">
            <div id="barChart" style="width: 600px;height:400px;"></div>
          </div>
          <!-- /.box-body -->
        </div>
      </div>
      <!-- /.col (LEFT) -->
      <div class="col-md-6">
        <!-- DONUT CHART -->
        <div class="box box-danger">
          <div class="box-header with-border">
            <h3 class="box-title">各类型资产数量统计：</h3>

            <div class="box-tools pull-right">
              <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
              </button>
              <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
            </div>
          </div>
          <div class="box-body">
            <div id="donutChart" style="width: 600px;height:400px;"></div>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- /.col (RIGHT) -->
    </div>
    <!-- /.row -->

  </section>
  <!-- /.content -->

{% endblock %}

{% block script %}
  <script src="{% static 'plugins/echarts.js' %}"></script>
  <!-- AdminLTE App -->
  <!-- SlimScroll 1.3.0 -->
  <script src="{% static 'plugins/slimScroll/jquery.slimscroll.min.js' %}"></script>
  <script src="{% static 'plugins/fastclick/fastclick.js' %}"></script>
  <!-- AdminLTE for demo purposes -->
  <script src="{% static 'dist/js/app.min.js' %}"></script>
  <!-- FastClick -->
  <script src="{% static 'dist/js/demo.js' %}"></script>
  <script src="{% static 'plugins/knob/jquery.knob.js' %}"></script>
  <!-- page script -->

  <script type="text/javascript">

    // 顶部服务器状态百分率圆图
    $(function () {
      /* jQueryKnob */

      $(".knob").knob({
        /*change : function (value) {
  //console.log("change : " + value);
  },
  release : function (value) {
  console.log("release : " + value);
  },
  cancel : function () {
  console.log("cancel : " + this.value);
  },*/
        draw: function () {
          // "tron" case
          if (this.$.data('skin') == 'tron') {
            var a = this.angle(this.cv)  // Angle
              , sa = this.startAngle          // Previous start angle
              , sat = this.startAngle         // Start angle
              , ea                            // Previous end angle
              , eat = sat + a                 // End angle
              , r = true;

            this.g.lineWidth = this.lineWidth;

            this.o.cursor
            && (sat = eat - 0.3)
            && (eat = eat + 0.3);

            if (this.o.displayPrevious) {
              ea = this.startAngle + this.angle(this.value);
              this.o.cursor
              && (sa = ea - 0.3)
              && (ea = ea + 0.3);
              this.g.beginPath();
              this.g.strokeStyle = this.previousColor;
              this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
              this.g.stroke();
            }

            this.g.beginPath();
            this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
            this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
            this.g.stroke();

            this.g.lineWidth = 2;
            this.g.beginPath();
            this.g.strokeStyle = this.o.fgColor;
            this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
            this.g.stroke();

            return false;
          }
        }
      });
      /* END JQUERY KNOB */
    });

    //不同状态资产数量统计 柱状图
    $(function () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('barChart'));

      // 指定图表的配置项和数据
      var option = {
        color: ['#3398DB'],
        title: {
          text: '数量'
        },
        tooltip: {},
        legend: {
          data: ['']
        },
        xAxis: {
          data: ["在线", "下线", "故障", "备用", "未知"]
        },
        yAxis: {},
        series:
          [{
            name: '数量',
            type: 'bar',
            barWidth: '50%',
            data: [{{ upline }}, {{ offline }}, {{ breakdown }}, {{ backup }}, {{ unknown }}]
          }]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    });

    //资产类型数量统计 饼图
    $(function () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('donutChart'));

      // 指定图表的配置项和数据
      option = {
        title: {
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['服务器', '网络设备', '存储设备', '安全设备', '软件资产']
        },
        series: [
          {
            name: '资产类型',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              {value:{{ server_number }}, name: '服务器'},
              {value:{{ networkdevice_number }}, name: '网络设备'},
              {value:{{ storagedevice_number }}, name: '存储设备'},
              {value:{{ securitydevice_number }}, name: '安全设备'},
              {value:{{ software_number }}, name: '软件资产'}
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    });
  </script>

{% endblock %}